<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="../css/animate.min.css" />
	</head>
	<body>
		<div id="test" >
			<button type="button" @click="handlerClick">按钮</button>
			<transition 
			enter-active-class="animate__animated animate__bounce" 
			leave-active-class="animate__animated animate__backOutRight"
			:duration="{ enter:300,leave:1500 }"><!--duration控制出场和入场的时长-->

				<p v-show='show'>{{ msg }}</p>
			</transition>
			<p v-show='show2' class="animate__animated animate__fadeIn">{{ msg }}</p>
		</div>
		<script>
			var vue = new Vue({
				el:'#test',
				data:{
					msg:'wangziyua good! animate!!!',
					show:true,
					show2:true
				},
				methods:{
					handlerClick(){
						this.show = !this.show
						this.show2 = !this.show2
					}
				}
			})
		</script>
	</body>
</html>
